<!-- 纵向布局 -->
<template>
  <el-container class="layout">
    <el-aside>
      <div class="menu" :style="{ width: isCollapse ? '65px' : '235px' }">
        <div class="logo flx-center">
          <img
            src="https://ts4.cn.mm.bing.net/th?id=ODLS.d87cb855-ded8-4732-827b-ad001f2fa9b3&w=16&h=16&o=6&pid=1.2"
            alt="logo"
          />
          <span v-show="!isCollapse">环球慧思</span>
        </div>
        <el-scrollbar>
          <el-menu
            :default-active="(activeMenu as string)"
            :router="false"
            :collapse="isCollapse"
            :collapse-transition="false"
            :unique-opened="true"
            text-color="#333"
            popper-effect="light"
          >
            <SubMenu :menuList="menuList" />
          </el-menu>
        </el-scrollbar>
        <div class="collapse-icon-box">
          <CollapseIcon id="collapse-icon" />
        </div>
      </div>
    </el-aside>

    <el-container>
      <el-header>
        <ToolBarLeft />
        <ToolBarRight />
      </el-header>
      <Main />
    </el-container>
  </el-container>
  <!-- 主题弹框 -->
  <theme-drawer />
</template>

<script setup lang="ts" name="layoutVertical">
import { GlobalStore } from '@/store'
import { AuthStore } from '@/store/modules/auth'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
import CollapseIcon from '../components/Header/components/CollapseIcon.vue'
import ThemeDrawer from '../components/Settings/ThemeDrawer.vue'

const route = useRoute()
const authStore = AuthStore()
const globalStore = GlobalStore()
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path))
const menuList = computed(() => authStore.showMenuListGet)
const isCollapse = computed(() => globalStore.themeConfig.isCollapse)
</script>

<style scoped lang="scss">
@import './index.scss';
</style>

<style lang="scss">
.layout {
  background-color: var(--el-bg-color);
  .collapse-icon-box {
    height: 28px;
    text-align: center;
    color: #333;
    #collapse-icon {
      margin-right: 0;
    }
  }
  .el-container .el-header {
    background-color: #f5f5f5;
  }
  .el-menu,
  .el-menu--popup {
    .el-menu-item {
      &.is-active {
        // background: #000;
        color: var(--el-color-primary);
        &::before {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          content: '';
          background: var(--el-color-primary);
        }
      }
    }
  }
}
</style>
